<template>
  <div class="search">
    <f-drawer ref="contractsDrawer" :title="drawerTitle" width="90%" placement="left" @submit="handleSubmit"
              @visibleChange="visibleChange"
              :showFooter="false">
      <contracts-form v-bind:contractIdParent="contractIdParent" ref="contractsForm"></contracts-form>
      <a-tabs @tabClick="tabClick" v-model="current">
        <a-tab-pane tab="合同标的物" :defaultActiveKey="currentArray[0]"  key="matdtl">
          <contracts-matdtl v-bind:contractIdParent="contractIdParent" ref="matdtl" v-if="drawerVisible"></contracts-matdtl>
        </a-tab-pane>
        <a-tab-pane tab="付款计划" :key="paymentdtl">
          <contracts-paymentdtl v-bind:contractIdParent="contractIdParent" ref="paymentdtl" v-if="drawerVisible"></contracts-paymentdtl>
        </a-tab-pane>
      </a-tabs>
    </f-drawer>
  </div>
</template>
<script>
  import contractsForm from './contracts_form.vue'
  import contractsMatdtl from './contracts_matdtl.vue'
  import contractsPaymentdtl from './contracts_paymentdtl.vue'

  export default {
    name: 'contractsDrawer',
    components: { contractsForm, contractsMatdtl, contractsPaymentdtl },
    props: [],
    data() {
      return {
        refs: this.$refs,
        placement: 'bottom',
        drawerVisible: false,
        isEdit: false,
        title: '',
        currentArray: ['matdtl', 'paymentdtl'],
        current: '',
        formData: {},
        forms: [
          'contractsForm', 'contractsMatdtl', 'contractsPaymentdtl'
        ],
        contractIdParent: '',
        contractsMatdtlKey: '',
        contractsPaymentdtlKey: ''
      }
    },
    methods: {
      showDrawer(data) {
        this.placement = 'bottom'
        this.isEdit = false
        if (data && data.contractsId) {
          this.isEdit = true
          this.formData = data
          this.contractIdParent = data.contractsId
        } else {
          this.formData = {}
        }
        this.refs['contractsDrawer'].show()
        this.tabClick(this.currentArray[0])
        // this.contractsMatdtlKey = new Date().getTime()
        // this.contractsPaymentdtlKey = new Date().getTime() + 1
      },
      handleSubmit(callback) {
        this.refs[this.current].handleSubmit(callback)
      },
      visibleChange(drawerVisible) {
        this.drawerVisible = drawerVisible
      },
      tabClick(name) {
        this.current = name
        // if (this.current === 'contractsForm') {
        //   this.title = '合同详细信息'
        // }
        // this.$nextTick(() => {
        //   this.refs[this.current[0]].setData(this.formData)
        // })
      }
    },
    computed: {
      drawerTitle: function() {
        return this.title
      }
    },
    created() {
    }
  }
</script>

<style scoped lang="less" rel="stylesheet/less">

</style>
